enable react compiler #1321
enable react compiler #1321
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR enables and configures the new React Compiler across the app, updates related polyfills, removes custom patches, and aligns linting and build configs accordingly.
- Add React Compiler options to Babel and Expo configs; remove custom React Native Modal patch.
- Adjust polyfill for
crypto, introduce a custom directive in a hook, and clean up event callback usage. - Update dependencies (React Native, ESLint plugins) and ESLint config to use latest
react-hooksrules.
Reviewed Changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/app/src/polyfill/crypto.ts | Made crypto optional and applied polyfill for getRandomValues |
| projects/app/src/client/ui/ReplicacheContext.tsx | Added "use no memo" React Compiler directive |
| projects/app/src/client/ui/QuizProgressBar.tsx | Removed useEventCallback, inlined handleLayout |
| projects/app/src/client/ui/PageSheetModal.tsx | Replaced backdropColor={false} with transparent={true} |
| projects/app/package.json | Pinned RN version; updated ESLint plugin versions |
| projects/app/eslint.config.mjs | Switched to react-hooks recommended-latest config |
| projects/app/babel.config.cjs | Configured babel-preset-expo for React Compiler options |
| projects/app/app.config.js | Enabled reactCompiler experiment |
| .yarn/patches/react-native-npm-0.79.2-9db13eddfe.patch | Removed custom Modal typing patch |
Comments suppressed due to low confidence (1)
projects/app/eslint.config.mjs:35
- The
react-hooksplugin entry was removed frompluginsbut itsrecommended-latestconfig is still applied. Re-addreact-hooksunderpluginsto ensure its rules are actually enabled.
[`react-hooks`]: reactHooksPlugin,
WalkthroughThis update modifies configuration files to enable and configure the React Compiler, updates related dependencies, and adjusts ESLint and Babel settings accordingly. It also removes TypeScript type declarations for certain ESLint plugins, updates modal transparency logic, and refines a crypto polyfill assignment to preserve existing implementations. Changes
Possibly related PRs
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
.yarn/patches/react-native-npm-0.79.2-9db13eddfe.patchis excluded by!**/.yarn/**yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (10)
projects/app/app.config.js(1 hunks)projects/app/babel.config.cjs(1 hunks)projects/app/eslint.config.mjs(1 hunks)projects/app/package.json(2 hunks)projects/app/src/client/ui/PageSheetModal.tsx(1 hunks)projects/app/src/client/ui/QuizProgressBar.tsx(1 hunks)projects/app/src/client/ui/ReplicacheContext.tsx(1 hunks)projects/app/src/polyfill/crypto.ts(1 hunks)projects/app/src/types/eslint-plugin-react-compiler.d.ts(0 hunks)projects/app/src/types/eslint-plugin-react-hooks.d.ts(0 hunks)
💤 Files with no reviewable changes (2)
- projects/app/src/types/eslint-plugin-react-compiler.d.ts
- projects/app/src/types/eslint-plugin-react-hooks.d.ts
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: moon-ci (0)
- GitHub Check: moon-ci (1)
🔇 Additional comments (9)
projects/app/src/client/ui/QuizProgressBar.tsx (1)
84-86: LGTM! Change aligns with React Compiler enablement.The removal of
useEventCallbackwrapper is appropriate when React Compiler is enabled, as the compiler should automatically optimize this function to prevent unnecessary re-renders. The core functionality remains unchanged.projects/app/src/polyfill/crypto.ts (2)
4-4: Good improvement to make the crypto property optional.Making the
cryptoproperty optional in the type declaration accurately reflects that some environments may not have a globalcryptoobject available.
11-11: Excellent use of nullish assignment operator for polyfill.Using
??=ensures the polyfill is only applied when no existingcryptoimplementation is present, preventing overwriting of native implementations. This is a best practice for polyfills.projects/app/src/client/ui/ReplicacheContext.tsx (1)
168-168: Appropriate React Compiler directive for manual memoization control.The
"use no memo";directive correctly disables automatic memoization for this function, which makes sense given the existing manual memoization logic forstableKeyandstableQueryparameters. This prevents conflicts between the React Compiler's automatic optimizations and the intentional manual control needed for the Replicache subscription logic.projects/app/src/client/ui/PageSheetModal.tsx (1)
166-166: Correct Modal API usage with transparent prop.Good fix! Changing from
backdropColor={false}totransparent={true}uses the correct React Native Modal API. ThebackdropColorprop doesn't exist on Modal, whiletransparentis the proper prop to control modal background transparency.projects/app/app.config.js (1)
153-153:✅ Verification successful
Correct enablement of React Compiler experimental feature.
Adding
reactCompiler: trueto the experiments section properly enables the React Compiler feature in Expo. This aligns with the PR objective and should work in conjunction with the Babel configuration updates.Verify that the Babel configuration has also been updated to support React Compiler:
🏁 Script executed:
#!/bin/bash # Description: Check if Babel config includes React Compiler setup # Expected: Babel config should have React Compiler plugin configured echo "Checking Babel configuration for React Compiler setup..." fd -e js -e cjs -e mjs babel.config projects/app/ --exec cat {}Length of output: 687
React Compiler enabled correctly
The
reactCompiler: trueflag is properly set in the experiments section ofprojects/app/app.config.js, and the Babel configuration inbabel.config.jsincludes the React Compiler setup:presets: [ [ 'babel-preset-expo', { 'react-compiler': { compilationMode: 'strict', panicThreshold: 'all_errors', }, }, ], 'nativewind/babel', ], plugins: ['babel-plugin-transform-import-meta'],No further changes are needed.
projects/app/babel.config.cjs (1)
6-18: LGTM! Proper React Compiler configuration.The React Compiler configuration is well-structured with appropriate settings:
compilationMode: "strict"ensures thorough optimization analysispanicThreshold: "all_errors"provides fail-fast behavior for better debuggingThis aligns with the PR objective to enable React Compiler.
projects/app/package.json (1)
76-76:✅ Verification successful
Verify React Native 0.79.2 compatibility with React Compiler.
The version change from a patch to 0.79.2 is significant. Ensure this version is compatible with the React Compiler configuration added in the Babel config.
🌐 Web query:
Is React Native 0.79.2 compatible with React Compiler? What are the minimum React Native version requirements for React Compiler?💡 Result:
React Native 0.79.2 and React Compiler Compatibility
Compatibility
- React Compiler is compatible with React version 17 and up, but works best with React 19[1][5][7].
- For versions of React lower than 19 (i.e., React 17 or 18), you must also install the
react-compiler-runtimepackage and specify the correcttargetin your compiler configuration[1][5][7].- The main requirement from React Native’s side is support for the React version you are using.
React Native Version Requirements
- The key requirement for React Compiler is not the React Native version directly, but rather the version of React it uses.
- React Native 0.78 introduced official support for React 19, alongside simplifying the integration process for React Compiler[2][6]. Versions prior to 0.78 typically use React 18 or below.
- React Native 0.79.2 continues the trend, shipping with React 19 by default[9].
Minimum React Native Version for Out-of-the-Box Support
- To use React Compiler easily (without extra steps like adding the runtime or complex configurations), your project should be on React Native 0.78 or later with React 19[2][6].
- If you are on React Native 0.79.2 (which uses React 19 by default), you are fully compatible with React Compiler with the newest and simplest setup[9].
- For React Native versions between 0.71 and 0.77 (using React 17 or 18), you can still use React Compiler, but you'll need to:
- Install
react-compiler-runtime- Set the appropriate
targetin your Babel config[1][5][7].Summary Table
React Native Version React Version React Compiler Support Notes 0.78 and up 19 Native/Recommended setup Easiest to use, no extra runtime needed[2][6][9]. 0.71 – 0.77 17 or 18 Supported, with extra steps Install react-compiler-runtime, settarget[1][5][7].Below 0.71 ≤16 Not supported React Compiler requires React 17+. Conclusion
- React Native 0.79.2 is fully compatible with React Compiler, since it uses React 19 by default.
- The minimum React Native version for out-of-the-box React Compiler support is 0.78, as this is when React 19 became the default[2][6][9].
- You can run React Compiler on React Native versions as old as those using React 17, but extra configuration is necessary[1][5][7].
Citations:
- 1: https://react.dev/blog/2025/04/21/react-compiler-rc
- 2: https://reactnative.dev/blog/2025/02/19/react-native-0.78
- 3: https://www.callstack.com/blog/how-to-upgrade-react-native-in-a-brownfield-application
- 4: https://reactnative.dev/docs/set-up-your-environment
- 5: https://dev.to/logrocket/react-compiler-rc-what-it-means-for-react-devs-46pl
- 6: https://www.lucentinnovation.com/blogs/it-insights/react-native-0-78-react-19-version-update-guide
- 7: https://react.dev/learn/react-compiler
- 8: https://microsoft.github.io/react-native-windows/docs/0.60/rnw-dependencies
- 9: https://news.notjust.dev/posts/50-what-s-new-in-react-native-0-78
- 10: https://docs.expo.dev/guides/react-compiler/
React Native 0.79.2 is fully compatible with React Compiler.
React Native 0.79.2 ships with React 19 by default, meeting the out-of-the-box requirements for React Compiler—no additional runtime or target tweaks needed.
projects/app/eslint.config.mjs (1)
61-62:✅ Verification successful
Verify the 'recommended-latest' configuration exists.
The change from
recommendedtorecommended-latestconfig aligns with the plugin upgrade, and removing thecompat.configwrapper suggests proper flat config support. However, verify that therecommended-latestconfiguration actually exists in the new plugin version.
🏁 Script executed:
#!/bin/bash # Description: Verify the available configurations in eslint-plugin-react-hooks # Expected: Should show available config names including 'recommended-latest' # Check the package structure to find available configs fd "package.json" node_modules/eslint-plugin-react-hooks --exec cat {} \; | jq '.exports // .main // "no exports found"' # Also check if there are any config files fd -e js -e json . node_modules/eslint-plugin-react-hooks/configs 2>/dev/null || echo "No configs directory found"Length of output: 380
🌐 Web query:
Does eslint-plugin-react-hooks@6.0.0-rc.1 export a "recommended-latest" configuration in its configs?💡 Result:
Yes, eslint-plugin-react-hooks@6.0.0-rc.1 does export a "recommended-latest" configuration in its configs. This configuration is specifically designed for users of ESLint 9.0.0 and above who are using the flat config system (eslint.config.js)[2].
The plugin provides different configuration options depending on your ESLint setup:
For ESLint 9.0.0+ using flat config (eslint.config.js):
- You can use
recommended-latest- Usage example:
import reactHooks from 'eslint-plugin-react-hooks'; export default [ reactHooks.configs['recommended-latest'], ];For ESLint below 9.0.0 using legacy config (.eslintrc):
- You should use
recommended-legacy- Usage example:
{ "extends": [ "plugin:react-hooks/recommended-legacy" ] }It's worth noting that while the plugin still supports the plain
recommendedconfiguration for backward compatibility, this will change in v6 to alias the flat recommended config[2]. The documentation indicates that these configuration options were introduced to accommodate the transition to ESLint's new flat config format while maintaining support for legacy configurations.If you're specifically looking to enable the React Compiler rule that was introduced in version 6.0.0-rc.1, you'll need to explicitly add
'react-hooks/react-compiler': 'error'to your ESLint configuration, as this rule is not enabled by default in any of the recommended configurations[4][5].Citations:
- 1: https://www.npmjs.com/package/eslint-plugin-react-hooks/v/6.0.0-rc.1
- 2: https://www.npmjs.com/package/eslint-plugin-react-hooks
- 3: [Compiler Bug]: eslint-plugin-react-hooks does not enable the new rule for the React compiler facebook/react#32986
- 4: https://react.dev/blog/2025/04/21/react-compiler-rc
- 5: https://dev.to/logrocket/react-compiler-rc-what-it-means-for-react-devs-46pl
- 6: eslint-plugin-react-hooks & "Flat Config" (ESLint 9) facebook/react#28313
- 7: https://www.roastdev.com/post/react-compiler-rc-what-it-means-for-react-devs
- 8: https://react.dev/learn/react-compiler
- 9: https://maxrozen.com/react-hooks-eslint-plugin-saved-hours-debugging-useeffect
- 10: https://classic.yarnpkg.com/en/package/eslint-plugin-react
Approve: ‘recommended-latest’ Config Verified
Verified that
eslint-plugin-react-hooks@6.0.0-rc.1exports arecommended-latestconfiguration for ESLint 9+ flat configs. The change in projects/app/eslint.config.mjs (lines 61–62) is correct as-is.
Summary by CodeRabbit
Bug Fixes
Chores
Refactor